<template>
	<div class="header">
		<header class="header">
			<template v-if="!backBtn">
				<template v-if='backUrl&&backUrl != -1'>
					<router-link :to='backUrl' class="return-back"></router-link>
				</template>
				<template v-else>
					<a href="javascript:window.history.back()" class="return-back"></a>
				</template>
			</template>
			<p class="head-tit">{{title}}</p>
			<slot></slot>
        </header>
	</div>	
</template>
<script>
	export default{
		name: 'headerTemp',
		props:['title','backUrl','backBtn'],
		methods:{
		},
		mounted () {
			// var axiosa = new axiosa();
			// console.log(axiosa)
		},
	};
</script>
<style lang="less" scoped>
.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #fff
}

.header:before {
    position: absolute;
    z-index: 2;
    content: "";
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #d8d8d8;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
}

.header .head-tit {
    width: 50%;
    font-size: 18px;
    text-align: center;
    color: #333;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis
}

.header .return-back {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 15px;
    width: 24px;
    height: 24px;
    line-height: 0;
    vertical-align: middle;
    display: inline-block;
    background: url() 50%;
    background-size: contain
}
.back-home-icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 32;
    width: 40px;
    height: 40px;
    display: block;
    background: url() no-repeat 50%;
    background-size: 20px 20px
}
</style>